<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title> 分享
		</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.mui-icon-extra {
				font-size: 24px;
				display: block;
				margin-top: 5px;
				line-height: 18px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-table-view all-top" >
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">选择地址</h1>
			<a class="mui-icon  mui-icon-more-filled mui-pull-right"></a>
		</header>
		<!--表单-->
		<div class="mui-table-view mui-table-view-chevron" style="margin-top: 3.5rem;">
			<div class="mui-content-padded" style="margin: 5px;">
				<form class="mui-input-group">
					<div class="mui-input-row" style="font-size: 14px;">
						<label>地址:</label>
						<input type="text" placeholder="请填写" style="font-size: 14px;" disabled="disabled" id="address">
					</div>
					<div class="mui-input-row" style="font-size: 14px;">
						<div style="float: left; padding-left: 4%; padding-top: 3%;">分享方式 :</div>
						<div class="mui-radio mui-left" style="float: left;">
						    <label>自提柜</label>
						    <input name="radio1" type="radio">
					    </div>
					    <div class="mui-radio mui-left" style="float: left;">
						    <label>门店</label>
						    <input name="radio1" type="radio">
					    </div>
					    <div style="clear: both;"></div>
					</div>					
					<div class="mui-input-row"  style="font-size: 14px;">
						<label>省市区:</label>
					    <button id='showCityPicker3' type='button' style="border: none; margin-top: 1%;">选择地址</button>
					</div>				    
					<div class="mui-input-row"  style="font-size: 14px;">
						<label>门店/自提柜 :</label>
					    <button id='showUserPicker' type='button' style="border: none; margin-top: 1%;">财富中心</button>
					</div>	
				</form>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<span class="mui-tab-item" onclick="javascript:window.location.href='index.html'">
		           取消
		    </span>
			<span class="mui-tab-item mui-active" onclick="javascript:window.location.href='mall.html'">
		         确定
		    </span>

		</nav>
		
	
		<script>
			(function($, doc) {
				$.init();
				$.ready(function() {
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: 'ywj',
						text: '财富中心'
					}, {
						value: 'aaa',
						text: '华府天地'
					}, {
						value: 'lj',
						text: '金融中心'
					}]);
                    
				var showUserPickerButton = doc.getElementById('showUserPicker');
					var userResult = doc.getElementById('userResult');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							console.log(items[0].text);
							showUserPickerButton.innerText = ""+items[0].text+"";
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					
					//-----------------------------------------
					//					//级联示例
					var cityPicker3 = new $.PopPicker({
						layer: 3
					});
					cityPicker3.setData(cityData3);
					var showCityPickerButton = doc.getElementById('showCityPicker3');
					var cityResult3 = doc.getElementById('cityResult3');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker3.show(function(items) {
							showCityPickerButton.innerText = "" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					
				});
			})(mui, document);

			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui('body').on('shown', '.mui-popover', function(e) {
				//console.log('shown', e.detail.id);//detail为当前popover元素
			});
			mui('body').on('hidden', '.mui-popover', function(e) {
				//console.log('hidden', e.detail.id);//detail为当前popover元素
			});
			
			function getAddress()
			{

				$('#address').val($('#province').val()+ $('#city').val()+$('#region').val()+$('#shop').val());
				
			}
			
		</script>
	</body>

</html>